import React from 'react';
import ImageWidget from './ImageWidget';
import Wrapper from '@plone/volto/storybook';

const ImageWidgetComponent = ({ children, className, value }) => {
  return (
    <Wrapper location={{ pathname: '/folder2/folder21/doc212' }}>
      <div className="ui segment form attached" style={{ width: '400px' }}>
        <ImageWidget value={value} children={children} className={className} />
      </div>
    </Wrapper>
  );
};

export const Image = ImageWidgetComponent.bind({});
Image.args = {
  value: {
    download: 'download/filename.png',
    file_name: 'filename.png',
    data:
      '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',
    size: 100,
    'content-type': 'image/png',
  },
  className: '',
};

export default {
  title: 'View Widgets/Image',
  component: ImageWidget,
  argTypes: {},
};
